<template>
  <el-container direction="vertical">
    <el-header>
      <h1>
        QCD登录情况
      </h1>
    </el-header>
    <el-main>
      <el-tabs v-model="activeName">
        <el-tab-pane
          v-for="(item, i) in tabList"
          :key="i"
          :label="item.label"
          :name="item.name"
        />
      </el-tabs>
      <el-input
        placeholder="search..."
        icon="search"
        v-model="search"
        class="search-input"
        style="width:20%;float:right;margin-bottom:20px"
      >
      </el-input>
      <el-table
        :data="tableData.filter(data => !search || data.usercd.toLowerCase().includes(search.toLowerCase())
            || data.username.toLowerCase().includes(search.toLowerCase())
            || data.depart.toLowerCase().includes(search.toLowerCase()))"
        border
        style="width: 100%">
        <el-table-column
          v-for="(item, n) in tableTitle"
          :key="n"
          :prop="item"
          :label="item"
        />
      </el-table>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'Home',
  data () {
    return {
      search: '',
      tabList: [
        {label: '全员', name: 'all'},
        {label: 'AI-POS決済', name: 'ai'},
        {label: 'データ&データサービス', name: 'mdlink'},
        {label: 'トラシンヨウ', name: 'depart1'},
        {label: 'リテールメディアPF', name: 'depart2'},
        {label: '基幹･MD･物流', name: 'depart3'},
        {label: '商談･棚割･商管', name: 'depart4'},
        {label: '生鮮(システム･分析)', name: 'depart5'},
        {label: '中国外販', name: 'depart6'},
        {label: '中国製品', name: 'depart7'},
        {label: '店舗システム', name: 'depart8'},
        {label: '自動発注', name: 'depart9'}
      ],
      activeName: 'all',
      tableTitle: [
        'usercd',
        'username',
        'depart',
        '20200816',
        '20200817',
        '20200818',
        '20200819',
        '20200820'
      ],
      tableData: [{
        usercd: '10015121',
        username: '石贵兵',
        depart: 'MDLINK',
        20200816: '○',
        20200817: '○',
        20200818: '○',
        20200819: '○',
        20200820: '○'
      }, {
        usercd: '10161480',
        username: '宋跃鹏',
        depart: 'MDLINK',
        20200816: '○',
        20200817: '○',
        20200818: '○',
        20200819: '○',
        20200820: '○'
      }, {
        usercd: '10141110',
        username: '王静',
        depart: 'MDLINK',
        20200816: '○',
        20200817: '○',
        20200818: '○',
        20200819: '○',
        20200820: '×'
      }, {
        usercd: '10154057',
        username: '凌贵辰',
        depart: 'MDLINK',
        20200816: '○',
        20200817: '○',
        20200818: '×',
        20200819: '○',
        20200820: '○'
      }, {
        usercd: '10154321',
        username: '王高峰',
        depart: 'SUNTORY-LINK',
        20200816: '○',
        20200817: '○',
        20200818: '×',
        20200819: '○',
        20200820: '○'
      }, {
        usercd: '10091256',
        username: '姚兴建',
        depart: 'SUNTORY-LINK',
        20200816: '○',
        20200817: '○',
        20200818: '○',
        20200819: '○',
        20200820: '○'
      }, {
        usercd: '10109009',
        username: '崔东方',
        depart: 'MDLINK',
        20200816: '○',
        20200817: '○',
        20200818: '○',
        20200819: '○',
        20200820: '○'
      }]
    }
  }
}
</script>
